<template>
  <view class="tactics-page page-container">
    <view class="header">
      <view class="title-wrap">
        <text class="page-title">AG 五大顶级策略</text>
      </view>
    </view>

    <view v-for="section in tacticsList" :key="section.key" class="section">
      <view class="title-wrap">
        <view class="title-line"></view>
        <view class="section-title">{{ section.title }}</view>
      </view>

      <view class="card-grid" v-for="item in toRows(section.strategies, 2)" :key="item.title">
        <view v-for="card in item" :key="card.key" class="card" 
          :style="{ backgroundImage: `url(${getBgFun(card.id)})` }" @click="toPath(card)">
          <view class="card-inner"></view>
        </view>   
      </view>
    </view>
  </view>
</template>

<script>
import sections from './config.js'
import { getStrategyType } from '@/api/tactics.js'
export default {
  name: 'Tactics',
  data() {
    return {
      sections,
      tacticsList:[]
    }
  },
  onLoad() {
    this.getStrategyTypes()
  },
  methods: {
    getBgFun(id){
      return this.sections.find(item=>item.id == id).bg
    },
    async getStrategyTypes() {
      const res = await getStrategyType()
      this.tacticsList = res.data
    },
    toRows(list, size) {
      const rows = []
      for (let i = 0; i < list.length; i += size) {
        rows.push(list.slice(i, i + size))
      }
      return rows
    },
    toPath(item) {
      console.log(item);
      uni.navigateTo({
        url: '/subPages/tactics/detail?id='+ item.id
      })

    }
  },
}
</script>

<style lang="scss" scoped>
.tactics-page {
  box-sizing: border-box;
  padding: 40rpx 24rpx 60rpx;
  background: #f3f8ff url('/static/images/tactics/tactics-header-bg.png') no-repeat top center;
  background-size: 100% auto;
}

.header {
  display: flex;
  justify-content: center;
  padding-top: var(--status-bar-height);
  margin-bottom: 24rpx;
}

.title-wrap {
  display: flex;
  align-items: center;
}

.title-line {
  width: 4rpx;
  height: 24rpx;
  margin-right: 12rpx;
  background-color: #06cbb6;
  border-radius: 2rpx;
}

.page-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #253238;
}

.section {
  margin-top: 24rpx;
}

.section-title {
  margin: 24rpx 0 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #2f3a40;
}

.card-grid {
  display: flex;
  justify-content: space-between;
}

.card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc((100% - 24rpx) / 2);
  height: 170rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 16rpx;
}

.divider {
  height: 0;
  margin: 0 0 20rpx;
  border-bottom: 2rpx dashed rgba(0, 0, 0, 0.12);
}

.card-inner {
  display: flex;
  flex-direction: column;
}

.card-title {
  margin-bottom: 10rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}

.card-subtitle {
  width: 100%;
  font-size: 24rpx;
  line-height: 36rpx;
  color: rgba(255, 255, 255, 0.95);
}

.disabled .card-title,
.disabled .card-subtitle {
  color: rgba(255, 255, 255, 0.9);
}
</style>
